<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0,
    maximum-scale=1.0, user-scalable=no"/>
    <link type="text/css" rel="stylesheet" href="magicscroll/magicscroll.css"/>
    <script type="text/javascript" src="magicscroll/magicscroll.js"></script>
    <title>圣诞节啦</title>
</head>
<body>

<h2 style="text-align: center; width: auto">大兔兔🐰牌比例尺转换器</h2>

<hr/>

<div class="MagicScroll" data-options="speed:2000; autoplay: 1000">
    <img src="1.jpg" width="100%">
    <img src="2.jpg" width="100%">
    <img src="3.jpg" width="100%">
</div>

<hr/>

<p>请我的大宝贝输入比例尺❤️：</p>

<form style="text-align: center">
    <fieldset>
        <legend>比例尺</legend>
        <input type="text" id="numerator" name="numerator" value="1" size="10%" readonly>
        :
        <input type="text" id="denominator" name="denominator" value="1" size="10%" pattern="[0-9]*">
    </fieldset>
</form>

<br/>
<hr/>

<p>请我的大宝贝输入长度并选择转换的单位😙：</p>
<form style="text-align: center">
    原来的长度：
    <input type="text" id="originalLength" name="originalLength" size="10%">
    <select id="unitOriginal" name="unitOriginal">
        <option value="mm">毫米</option>
        <option value="cm">厘米</option>
        <option value="m" selected>米</option>
        <option value="km">千米</option>
    </select>
    <br/>
    图上的长度：
    <input type="text" id="newLength" name="newLength" size="10%">
    <select id="unitNew" name="unitNew">
        <option value="mm">毫米</option>
        <option value="cm" selected>厘米</option>
        <option value="m">米</option>
    </select>
</form>

<br/>
<div style="text-align: center">
    <button name="originalToPaper" onclick="originalToPaper()">原来➡️图上</button>
    <button name="paperToOriginal" onclick="paperToOriginal()">图上➡️原来</button>
    <button name="calculateRate" onclick="calculateRate()">计算比例尺</button>
    <button name="clearInputBox" onclick="clearInputBox()">清空输入框</button>
</div>


<script>
    function clearInputBox() {
        document.getElementById("originalLength").value = "";
        document.getElementById("newLength").value = "";
    }

    function calculateRate() {
        let originalLength = document.getElementById("originalLength").value;
        originalLength = otherUnitToMeter(originalLength, "unitOriginal");
        let newLength = document.getElementById("newLength").value;
        newLength = otherUnitToMeter(newLength, "unitNew");
        if (originalLength && newLength) {
            document.getElementById("denominator").value = (originalLength / newLength).toFixed(2);
        } else {
            alert("请我的大宝贝看一下有没有漏填数据哦!")
        }
    }

    function paperToOriginal() {
        let lengthMeter = 0;
        let newLength = document.getElementById("newLength").value;
        let scaleRate = document.getElementById("denominator").value;
        let lengthMeterOriginalScale;
        let lengthOriginal;
        newLength = Number(newLength);
        scaleRate = Number(scaleRate);
        lengthMeter = otherUnitToMeter(newLength, "unitNew");
        lengthMeterOriginalScale = lengthMeter * scaleRate;
        lengthOriginal = meterToOtherUnit(lengthMeterOriginalScale, "unitOriginal");
        if (lengthOriginal) {
            document.getElementById("originalLength").value = lengthOriginal.toFixed(3);
        } else {
            alert("请我的大宝贝看一下有没有输错哦！！！");
        }
    }

    function originalToPaper() {
        let lengthMeter = 0;
        let originalLength = document.getElementById("originalLength").value;
        let scaleRate = document.getElementById("denominator").value;
        let lengthMeterNewScale;
        let lengthPaper;
        originalLength = Number(originalLength);
        scaleRate = Number(scaleRate);
        lengthMeter = otherUnitToMeter(originalLength, "unitOriginal");
        lengthMeterNewScale = lengthMeterToNewScale(lengthMeter, scaleRate);
        lengthPaper = meterToOtherUnit(lengthMeterNewScale, "unitNew");
        if (lengthPaper) {
            document.getElementById("newLength").value = lengthPaper.toFixed(3);
        } else {
            alert("请我的大宝贝看一下有没有输错哦！！！");
        }
    }

    function lengthMeterToNewScale(lengthMeter, scaleRate) {
        return lengthMeter / scaleRate;
    }

    function meterToOtherUnit(lengthMeterNewScale, select) {
        let newUnit = getSelectedValue(select);
        if (newUnit === "km") {
            return lengthMeterNewScale / 1000;
        } else if (newUnit === "m") {
            return lengthMeterNewScale;
        } else if (newUnit === "cm") {
            return lengthMeterNewScale * 100;
        } else if (newUnit === "mm") {
            return lengthMeterNewScale * 1000;
        }
    }

    function otherUnitToMeter(originalLength, select) {
        let originalUnit = getSelectedValue(select);
        if (originalUnit === "km") {
            return originalLength * 1000;
        } else if (originalUnit === "m") {
            return originalLength;
        } else if (originalUnit === "cm") {
            return originalLength / 100;
        } else if (originalUnit === "mm") {
            return originalLength / 1000;
        }
    }

    function getSelectedValue(select) {
        let text;
        let i;
        let obj = document.getElementById(select);
        for (i = 0; i < obj.length; i++) {
            if (obj[i].selected) {
                text = obj[i].value;
                return text;
            }
        }
    }

</script>
</body>
</html>